<template>
  <div>
    <div class="menPhis-column">
      <div class="column" style="height: 230px" ref="column"></div>
      <div class="column-pdd"></div>
    </div>
    <div class="menPhis-column">
      <div class="column-box">
        <div class="column-box-title">
          <span style="margin-left: 5px;">宣传部署月走势</span>
        </div>
      </div>
      <div class="column" ref="brokenLine"></div>
      <div class="column-pdd"></div>
    </div>
    <div class="menPhis-list" v-if="dataList.length > 0">
      <div
        class="column-box list-box"
        :style="dataLists[index] === 0 ? 'pointer-events:none' : ''"
        @click="jump(item)"
        v-for="(item, index) in dataList"
        :key="index">
        <span class="">{{ item.jc }}</span>
        <span>{{ dataLists[index] }}</span>
      </div>
    </div>
    <div class="menPhis-list" v-else>
      <div
        class="column-box list-box"
        :style="dataLists[index] === 0 ? 'pointer-events:none' : ''"
        @click="jumps(item)"
        v-for="(item, index) in peopleList"
        :key="index">
        <span class="">{{ item.person }}</span>
        <span>{{ item.count }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  name: 'field',
  props: {
    //
    columns: {
      type: Array,
      default: () => []
    },
    dates: {
      type: Array,
      default: () => []
    },
    brokenLine: {
      type: Array,
      default: () => []
    },
    date: {
      type: Array,
      default: () => []
    },
    dataList: {
      type: Array,
      default: () => []
    },
    dataLists: {
      type: Array,
      default: () => []
    },
    peopleList: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    dataList () {
      this.column();
    },
    peopleList () {
      this.column();
    }
  },
  methods: {
    //  柱状图/折线图数据
    column () {
      const myChart = echarts.init(this.$refs.column);
      const myCharts = echarts.init(this.$refs.brokenLine);
      let data = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {type: 'shadow'}
        },
        grid: {
          top: '15%',
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        yAxis: [
          {
            name: '次',
            type: 'value',
            axisTick: {
              alignWithLabel: true,
              show: false,
            },
            axisLine: {
              show: false
            },
            minInterval: 2,
          }
        ],
        xAxis: [
          {
            type: 'category',
            default: false,
            data: this.dates,
            axisTick: {
              alignWithLabel: true,
              show: false,
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              rotate: -70,
              show: true,
              interval: 0,
              textStyle: {
                color: '#535353',
                fontSize: 12,
              },
            },
          }
        ],
        dataZoom: [
          {
            roam: false,
            zoomOnMouseWheel: false,
            type: 'inside',
            xAxisIndex: [0],
            start: 1,
            end: 63
          }
        ],
        series: [
          {
            name: '数量',
            type: 'bar',
            barWidth: '40%',
            data: this.columns,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: 'black',
                    fontSize: 12
                  }
                }
              }
            }
          }
        ]
      }
      let datas = {
        color: ['#3398DB'],
        grid: {
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '7%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          default: false,
          data: this.date,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              color: '#535353',
              fontSize: 12,
            },
          }
        },
        yAxis: [
          {
            name: '次',
            type: 'value',
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false
            },
            minInterval: 2,
          }
        ],
        dataZoom: [
          {
            roam: false,
            zoomOnMouseWheel: false,
            type: 'inside',
            xAxisIndex: [0],
            start: this.dateLocation().start,
            // end: this.date.length < 12 ? 27 : 50
            end: this.dateLocation().end
          }
        ],
        series: [
          {
            name: '数量',
            type: 'line',
            barWidth: '40%',
            data: this.brokenLine,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: 'black',
                    fontSize: 12
                  }
                }
              }
            }
          }
        ]
      };
      myChart.setOption(data);
      myCharts.setOption(datas);
      myChart.getZr().on('click', item => {
        let pointInPixel = [item.offsetX, item.offsetY]
        if (myChart.containPixel('grid', pointInPixel)) {
          let index = myChart.convertFromPixel({ seriesIndex: 0 }, [item.offsetX, item.offsetY])[0]
          this.$emit('jumpColumn', index);
        }
      })
    },
    dateLocation () {
      let month = {
        start: 0,
        end: 0
      };
      if (this.date.length <= 12) {
        month.start = (100/12)*(new Date().getMonth() + 1 - 6)
        month.end = (100/12)*(new Date().getMonth() + 1)
      } else {
        month.start = (100/30)*(new Date().getDate() - 7)
        month.end = (100/30)*(new Date().getDate() - 1)
      }
      return month
    },
    //  跳转
    jump (data) {
      this.$emit('jump', data);
    },
    //  跳转列表
    jumps (data) {
      this.$emit('jumps', data);
    }
  }
}
</script>

<style scoped>
  * {
    box-sizing: border-box;
  }
  .menPhis-column {
    padding: 0.185rem 0;
  }
  .column {
    width: 100%;
    height: 4.62963rem;
  }
  .column-pdd {
    padding: 0.185185rem 0;
    background-color: #F2F2F2;
  }
  .menPhis-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
  }
  .list-box {
    position: relative;
    width: 50%;
    border-bottom: 1Px solid #F2F2F2;
    padding: 0.277778rem 0.37037rem;
  }
  .list-box:nth-child(2n - 1):after {
    content: '';
    position: absolute;
    right: 0;
    height: 100%;
    width: 1Px;
    top: 0;
    background-color: #F2F2F2;
  }
  .column-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
